<template>
	<view>
		<u-popup v-model="show" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle" border-radius="24" :mask-close-able="false">
			<view class="flex-col justify-start page">
			  
			  <view class="flex-col justify-start items-center section">
			    <view class="flex-row justify-start section_3">
			      <view class="flex-row justify-start items-start section_4 relative">
			      <view class="flex-col">
			        <view class="group_2">
			          <text class="font text_2">请用</text>
			          <text class="font text_4">后置摄像头</text>
			        </view>
			        <text class="font text_2 ml-18">扫描二维码</text>
			      </view>
			        
			        <image
			      class="image_5"
			      src="/static/image/haoduogeni/popup-top-icon.png"
			    />
			      </view>
			      
			    </view>
			    
			    <view class="flex-col section_5">
			      <text class="self-center text_5">该页面扫码中不可关闭</text>
			      <view class="flex-col items-center self-stretch mt-14-5">
			        <view class="flex-col justify-start items-center image-wrapper">
			          <image
			            class="image_6"
			            :src="QrCode != '' ? QrCode : '/static/image/haoduogeni/code.png'"
			          />
			        </view>
			        <text class="font_2 text_6">提示：请将链接发送到另外一部手机上</text>
			      </view>
			      <view class="flex-row equal-division group_3 mt-14-5">
			        <view class="flex-col items-center group_4 equal-division-item">
			          <image
			            class="image_7"
			            src="/static/image/haoduogeni/send-link.png"
			          />
			          <text class="font_2 mt-5">发送链接</text>
			        </view>
			        <view class="flex-col items-center group_4 equal-division-item">
			          <image
			            class="image_7"
			            src="/static/image/haoduogeni/scan-success.png"
			          />
			          <text class="font_2 mt-5-5">扫码成功可退出</text>
			        </view>
			        <view class="flex-col items-center group_4 equal-division-item">
			          <image
			            class="image_7"
			            src="/static/image/haoduogeni/exit-nouse.png"
			          />
			          <text class="font_2 mt-5">退出后相关失效</text>
			        </view>
			      </view>
			    </view>
			    <!-- <text class="text_4 pos_3">后置摄像头</text> -->
			  </view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		bindUser
	} from '../../../haoduogeni/common/api/user';
	import {
		checkQrcode
	} from '../../../haoduogeni/common/api/send';
	export default {
		props: {
			show: {
			      value: false,
			      type: Boolean
			    },
			    QrCode: {
			      value: "",
			      type: String
			    },
			    uuid: {
			      value: "",
			      type: String
			    },
			    codeId: {
			      value: "",
			      type: String
			    }
		},
		created() {
			this.checkStatus();
		},
		data() {
			return {
				// show: false,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.2)'
				},
				timerCheckCode: null
			}
		},
		beforeDestroy() {
		    clearTimeout(this.timerCheckCode);
		  },
		methods: {
			// open(){
			// 	this.show = true;
			// },
			bindUserByuid(dataId){
			      var _this = this;
			      bindUser({
			        id: _this.codeId,
			        wx_uid: dataId
			      }).then(res => {
			        //成功时回调函数
			        console.log(res, '检测状态')
			        if (res.errno == 0) {
			          _this.$emit("loginSuccess");
			          _this.show = false;
			        }else {
			          
			        }
			      }).catch(err => {
			        //失败时回调函数
			        console.log(err)
			      })
			    },
			    checkStatus() {
			      var _this = this;
			      checkQrcode({
			        uuid: this.uuid
			      }).then(res => {
			        //成功时回调函数
			        console.log(res, '检测状态')
			        if (res.errno == 0) {
			          _this.bindUserByuid(res.data);
			        }else {
			          _this.timerCheckCode = setTimeout(() => {
			            _this.checkStatus();
			          }, 1000);
			        }
			      }).catch(err => {
			        //失败时回调函数
			        console.log(err)
			      })
			    },
			    popupSpecsbtn: function (t) {
			      console.log(t);
				  clearTimeout(this.timerCheckCode);
			      this.$emit("closeShow");
			      this.show = false;
			    },
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../common/css/common.css");
.mt-19 {
  margin-top: 38rpx;
}
.ml-18 {
  margin-left: 37rpx;
}
.ml-12-5 {
  margin-left: 25rpx;
}
.mt-14-5 {
  margin-top: 29rpx;
}
.mt-5 {
  margin-top: 10rpx;
}
.mt-5-5 {
  margin-top: 11rpx;
}
/* .page {
  padding: 30rpx 0 20rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
} */
.group {
  margin-left: 30rpx;
  margin-right: 15rpx;
}
.image {
  margin-left: 37rpx;
  margin-right: 13rpx;
  width: 655rpx;
  height: 24rpx;
}
.section_2 {
  padding: 11rpx 25rpx 14rpx;
  background-color: #ffffffba;
  border-radius: 32rpx;
  width: 174rpx;
  border-left: solid 1rpx #eaeaea;
  border-right: solid 1rpx #eaeaea;
  border-top: solid 1rpx #eaeaea;
  border-bottom: solid 1rpx #eaeaea;
}
.image_2 {
  width: 61rpx;
  height: 37rpx;
}
.image_3 {
  width: 34rpx;
  height: 34rpx;
}
.text {
  margin-left: 11rpx;
  margin-top: 24rpx;
  color: #000000;
  font-size: 44rpx;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 42rpx;
}
.image_4 {
  margin-right: 14rpx;
  margin-top: 29rpx;
  width: 92.1333vw;
  height: 180.4vw;
}
.section {
  /* padding: 445rpx 0 421rpx; */
  /* background-color: #00000080; */
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.section_3 {
  /* padding-bottom: 569rpx; */
  background-color: #ffffff;
  border-radius: 32rpx;
  width: 538rpx;
  height: 100%;
}
.section_4 {
  padding: 38rpx 0 50rpx;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  background-image: url('https://jianji.axu9.com/friendCircleImg/popup-top-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 538rpx;
}
.group_2 {
  margin-left: 37rpx;
}
.font {
  font-size: 34rpx;
  font-family: Alimama ShuHeiTi;
  line-height: 60rpx;
  font-weight: 700;
  color: #ffffff;
}
.text_2 {
  text-shadow: 0rpx 3rpx #19c6b266;
}
.text_3 {
  color: #fe2b2b;
}
.image_5 {
  width: 327rpx;
  height: 184rpx;
  position: absolute;
  top: 20rpx;
  right: 0;
}
.pos_2 {
  position: absolute;
  right: 76rpx;
  top: 468rpx;
}
.section_5 {
  padding: 74rpx 0 33rpx;
  border-radius: 16rpx 16rpx 32rpx 32rpx;
  background-image: url('https://jianji.axu9.com/friendCircleImg/popup-middle-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 540rpx;
  margin-top: -40rpx;
}
.pos_4 {
  position: absolute;
  left: 50%;
  top: 611rpx;
  transform: translateX(-50%);
}
.text_5 {
  color: #fe2b2b;
  font-size: 32rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  line-height: 31rpx;
}
.image-wrapper {
  padding: 26rpx 0;
  border-radius: 20rpx;
  background-image: url('https://jianji.axu9.com/friendCircleImg/code-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 282rpx;
}
.image_6 {
  width: 230rpx;
  height: 230rpx;
}
.font_2 {
  font-size: 22rpx;
  font-family: PingFang SC;
  line-height: 22rpx;
  color: #3b5050;
}
.text_6 {
  color: #6b7280;
}
.equal-division {
  align-self: stretch;
}
.group_3 {
  padding: 0 12rpx;
}
.group_4 {
  flex: 1 1 171rpx;
}
.equal-division-item {
  padding: 8rpx 0;
}
.image_7 {
  width: 48rpx;
  height: 48rpx;
}
.text_4 {
  color: #fe2b2b;
  font-size: 34rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 700;
  line-height: 32rpx;
  text-shadow: 0rpx 2rpx #ffffffe6;
}
.pos_3 {
  position: absolute;
  left: 213rpx;
  top: 496rpx;
}
</style>
